import React,{Component} from 'react';
import { NavLink as NLink } from 'react-router-dom';
import {
  Collapse,Navbar,NavbarToggler,NavbarBrand,
  Nav,NavItem,NavLink,UncontrolledDropdown,
  DropdownToggle,DropdownMenu,DropdownItem } from 'reactstrap';
export default class Navigator extends Component{
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color="dark" dark expand="md">
          <NLink to="/" exact>Home
            {/* <NavbarBrand>Home</NavbarBrand> */}
          </NLink>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem >
                <NLink to="/counter" activeClassName="active">Counter
                </NLink>
              </NavItem>
              <NavItem >
                <NLink to="/product" activeClassName="active">Product
                  {/* <NavLink>Contact</NavLink> */}
                </NLink>
              </NavItem>
              {/* <NavItem >
                <NLink to="/productDetails" activeClassName="active">ProductDetails
                </NLink>
              </NavItem> */}
              <NavItem >
                <NLink to="/carts" activeClassName="active">Carts
                  {/* <NavLink>Contact</NavLink> */}
                </NLink>
              </NavItem>
              <NavItem >
                <NLink to="/mime" activeClassName="active">Mime
                  {/* <NavLink>About</NavLink> */}
                </NLink>
              </NavItem>
              {/* <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown> */}
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}